<template>
    <div>
        <web-header show="theme" />
        <!-- 主题游双重循环渲染列表 -->
        <template v-for="(rs, index) in theme" :key="rs.id">
            <div class="box_b center_c">
                <div class="top">
                    <dl>
                        <dt>
                            <!-- <img :src="rs.pic" /> -->
                            <img :src="`https://admin.hqx.com.cn/Public/Uploads/${rs.picm}`" />
                            <h3><router-link target="_blank" :to="`/theme/list/${rs.id}`">{{ rs.title }}</router-link>
                            </h3>
                        </dt>
                        <dd>{{ rs.intro }}</dd>
                        <!-- <dd>{$rs.intro}</dd> -->
                    </dl>
                    <div class="list">
                        
                        <router-link :to="`/theme/list/${rs.id}`" target="_blank" class="more">查看更多</router-link>
                        <!-- 根据主题展示带主题玩法的城市 -->
                        <!-- <volist name="rs.areas" id="rs2">
                            <router-link target="_blank" to="/theme/list?{$rs.title_en}-{$rs2.id}/">{$rs2.title}</router-link>
                        </volist> -->

                    </div>
                </div>
                <div class="bottom">
                    <!-- <div class="line"></div> -->
                    <div class="list">
                        <section v-for="(item, index) in rs.pros">
                            <div class="box">
                                <div class="pic">
                                    
                                    <router-link target="_blank" :to="`/details/${item.id}`" class="link">
                                        <img :src="`https://admin.hqx.com.cn/Public/Uploads/${item.pic}`" class="pic-img">
                                    </router-link>
                                    <!-- <router-link target="_blank" :to="`/details/${item.id}`"
                                        class="cat">加入购物车</router-link> -->
                                </div>
                                <dl class="text">
                                    <dt>
                                        <router-link target="_blank" :to="`/details/${item.id}`"
                                            class="clamp-line-2">{{ item.title }}</router-link>
                                    </dt>
                                    <!-- <dd> {{ item.intro }}</dd> -->
                                </dl>
                                <div class="price"> 
                                    <!-- <span>市场价：￥{{ item.price + 300 }}</span> -->
                                    <strong style="float: right;">￥{{ item.price }}元/人起</strong>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </template>

        <web-footer />
        <back-top />
    </div>
</template>

<script setup>


import { ref, onMounted, computed } from "vue";
import { theme_lists } from "@/api/travel";

let theme = ref([]);

onMounted(async () => {
    /* 
    海岛    10,
    亲子    11,
    团建    34,
    蜜月    9,
    漂流    16,
    邮轮    6,
    研学    7,
    乐园    33,
    温泉    12,
    历史    22,
    美食    5,
    滑雪    3,
    露营    38,
    徒步    24,
    */
   
    let res = await theme_lists({ids:'10,11,34,9,16,6,7,33,12,22,5,3,38,24,',limit: 4 });
    // let res = await theme_lists({ limit: 4 });
    theme.value = res.data;
});

</script>

<style lang="scss" scoped>
@import "../../css/main_theme.css";
</style>
